<!-- 文章 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetArticleListApi">
            <!-- <template #balanceType="{ row }">
                <div class="balanceType"
                    :style="{ color: balanceTypeObj[row.balanceType].color, backgroundColor: balanceTypeObj[row.balanceType].bgk }">
                    {{ balanceTypeObj[row.balanceType].text }}
                </div>
            </template>
            <template #changeAmount="{ row }">
                <div>
                    {{ (row.balanceType === 1 ? '+' : '-') + row.changeAmount }}
                </div>
            </template> -->
            <template #articleStatus="{ row }">
                <el-switch disabled :active-value="1" :inactive-value="2" v-model="row.articleStatus" />
            </template>
            <template #action="{ row }">
                <el-button v-if="!row.pick" @click="pickFn(row)">选择</el-button>
                <el-button v-else @click="reverseFn(row)" type="primary">选中</el-button>
            </template>
        </PageTable>
    </el-card>
</template>

<script setup>

import { reactive, ref, defineComponent, defineExpose } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { GetArticleListApi } from "@/api/Banner";
import { GetArticleLabelApi } from "@/api/Article";


defineComponent({
    components: {
        FormTable,
        PageTable
    }
})

const parameter = reactive({
    articleTitle: null,
    labelId: null,
    articleStatus: null

})

//选中
const pick = ref('')

const positionType = ref([])
//文章标签列表查询(下拉框)
async function GetArticleLabel() {
    const res = await GetArticleLabelApi(2)
    res.data.forEach(item => {
        item.label = item.labelName
        item.value = +item.labelId
    })
    positionType.value = res.data
    console.log(positionType.value);
}
GetArticleLabel()

const formList = ref([
    {
        type: 'input',
        label: '文章名称',
        code: 'articleTitle',
    },

    {
        type: 'select',
        label: '文章分类',
        options: positionType,
        code: 'labelId',
    },
    {
        type: 'select',
        label: '是否展示',
        options: [
            { label: '展示', value: 1 },
            { label: '隐藏', value: 2 },
        ],
        code: 'articleStatus',
    },
])
const column = [
    { label: '文章名称', prop: 'articleTitle' },
    { label: '分类', prop: 'labelName' },
    { label: '是否展示', slots: 'articleStatus' },
    { label: '创建时间', prop: 'createTime' },
    { label: '操作', slots: 'action' },
]

// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.username = null
    parameter.articleTitle = null
    parameter.labelId = null
    parameter.articleStatus = null
    tableRef.value.refresh(true)
}

const Pickid = ref()
const type = 2
//选中
function pickFn(row) {
    Pickid.value = row.boxId
    row.pick = true
}
//反选
function reverseFn(row) {
    Pickid.value = ''
    row.pick = false
}

defineExpose({ Pickid, type })


</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}
</style>